<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>

        var box=document.getElementById("box")
        function loadImageAsync(url){
            const promise=new Promise(function(resolve,reject){
                   //异步处理:消耗时间的代码
                   const image=new Image();
                   
                   img.src=url
                   image.onload=function(){
                           resolve(image)
                   }

                   image.onerror=function(){
                       reject('Could not load image at'+url)
                   }

            })

            return promise;
        }
         const promise=loadImageAsync("http://iwenwiki.com/api/vue-data/vue-data-1.png");
         promise.then(function(data){
            //成功
            box.appendChild(data)
         },function(error){
            //失败
            box.innerHTML="图片加载失败";
            console.log(error );
            
         }) 
    </script>
</body>
</html>